@import '@/styles/color.less';
@import '@/styles/token.less';
// 编辑器头部右侧区域样式
.editorHeaderRight {
  display: flex;
  align-items: center;
  gap: 4px; // 增加间距以适应更多按钮
}

.versionSelectorButton {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  padding-right: 12px;
}

.versionSelectorDropdown {
  background: @colorBgContainer;
  border-radius: @borderRadiusLg;

  :global {
    .ant-dropdown-menu {
      max-height: 300px;
      overflow-y: auto;
    }
  }
}

.caretDownIcon {
  transition: transform 0.2s ease;

  &.expanded {
    transform: rotate(180deg);
  }
}
// 预览状态信息样式
.previewStatusInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;

  .lastUpdated {
    font-size: @fontSizeSm;
    color: @colorTextTertiary;
  }

  .previewTitle {
    font-size: @fontSize;
    font-weight: @fontWeightStrong;
    color: @colorTextBase;
  }

  .statusBadge {
    font-size: @fontSizeSm;
    color: @colorSuccess;
    background: @colorSuccessBg;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid @colorSuccessBorder;
  }

  .loadingBadge {
    font-size: @fontSizeSm;
    color: @colorWarning;
    background: @colorWarningBg;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid @colorWarningBorder;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

// 版本选择器按钮样式
.versionDropdownButton {
  min-width: 60px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  margin-right: 16px;
}
